<template>
  <div id="app">

    <transition name="fade" mode="out-in" >
      <keep-alive :include="routeList">
        <router-view v-wechat-title="$route.meta.title"  class="Router"></router-view>
      </keep-alive>
    </transition>

  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        animateName: '',
        animateName2:'',
        routeList:['indexPages'],
      }
    },
    watch: {
      $route(to, from) {
        if (Number(to.meta.index) > Number(from.meta.index)) {
          this.routeList.push(to.name)
        }else if(Number(to.meta.index) < Number(from.meta.index)) {
          if(this.routeList.indexOf(from.name)>= 0){
            this.routeList.splice(this.routeList.indexOf(from.name),1)
          }
        }
      }
    },
  }
</script>


<style>
  #app {
    /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
    /*-webkit-font-smoothing: antialiased;*/
    /*-moz-osx-font-smoothing: grayscale;*/
    text-align: center;
    color: #333333;
    height: 100%;
    font-size: 0.28rem;
    background: #fff;
  }

  .fade-enter {
  opacity:0;
  }
  .fade-leave{
  opacity:1;
  }
  .fade-enter-active{
  transition:opacity .3s;
  }
  .fade-leave-active{
  opacity:0;
  transition:opacity .3s;
  }
  /*.Router {*/
    /*transition: all .2s cubic-bezier(.55, 0, .1, 1);*/
  /*}*/

  /*.slide-left-enter, .slide-right-leave-active {*/
    /*opacity: 0;*/
    /*transform: translate(50px, 0);*/
  /*}*/

  /*.slide-left-leave-active, .slide-right-enter {*/
    /*opacity: 0;*/
    /*transform: translate(-50px, 0);*/
  /*}*/
</style>
